<script setup lang="ts">
import {computed, ref} from 'vue'
import {getCookie} from "./utils";

interface ApiSettings {
  api?: string;
  params?: {
    [key: string]: any;
  };
  config?: {
    [key: string]: any;
  };
}

const token = ref(getCookie('token') || getCookie('access_token'));

const props = withDefaults(defineProps<{
  commonApiSettings?: ApiSettings;
  statisticsApiSettings?: ApiSettings;
  toolsListApiSettings?: ApiSettings;
}>(), {
  commonApiSettings: () => ({
    api: 'https://www.china9.cn/api/app/aiToolOften',
  }),
  statisticsApiSettings: () => ({
    api: 'https://www.china9.cn/api/app/aiToolClick'
  }),
  toolsListApiSettings: () => ({
    api: 'https://www.china9.cn/api/app/getAItoolData'
  }),
})

const apiConfig = computed(() => {
  return {
    common: {
      ...props.commonApiSettings.config,
      headers: {
        'Content-Type': 'application/json',
        'token': token.value
      }
    },
    statistics: {
      ...props.statisticsApiSettings.config,
      headers: {
        'Content-Type': 'application/json',
        'token': token.value
      }
    },
    tools: {
      ...props.toolsListApiSettings.config,
      headers: {
        'Content-Type': 'application/json',
        'token': token.value
      }
    }
  }
})

// 获取常用工具
const commonTools = ref<any[]>([])
const getCommonTools = async () => {
  if (props.commonApiSettings.api != null) {
    try {
      const response = await fetch(props.commonApiSettings.api, {
        method: 'POST',
        headers: apiConfig.value.common.headers,
        body: JSON.stringify(props.commonApiSettings.params)
      });
      const res = await response.json();
      if (response.status === 200 && res.code === 200 && res.data) {
        commonTools.value = res.data;
      } else {
        console.log('请求失败');
      }
    } catch (error) {
      console.log('请求失败', error);
    }
  }
}
getCommonTools();

// 跳转和统计
const jump = async (item: any) => {
  let link = item.url
  if (!link.includes('http://') && !link.includes('https://')) {
    link = 'http://' + link;
  }
  window.open(link, '_blank');
  if (props.statisticsApiSettings.api != null) {
    try {
      const response = await fetch(props.statisticsApiSettings.api, {
        method: 'POST',
        headers: apiConfig.value.statistics.headers,
        body: JSON.stringify(props.statisticsApiSettings.params)
      });
      if (response.status === 200) {
        getCommonTools();
      } else {
        console.log('请求失败');
      }
    } catch (error) {
      console.log('请求失败', error);
    }
  }
}

// 获取工具列表
const aiTools = ref<any[]>([])
const getAiTools = async () => {
  if (props.toolsListApiSettings.api != null) {
    try {
      const response = await fetch(props.toolsListApiSettings.api, {
        method: 'POST',
        headers: apiConfig.value.tools.headers,
        body: JSON.stringify(props.toolsListApiSettings.params)
      });
      const res = await response.json();
      if (response.status === 200 && res.code === 200 && res.data) {
        aiTools.value = res.data;
      } else {
        console.log('请求失败');
      }
    } catch (error) {
      console.log('请求失败', error);
    }
  }
}
getAiTools();
</script>

<template>
  <div class="ai-tools-page">
    aiTools
    <div v-if="commonTools.length" class="list-container">
      <div class="top-box flex">
        <div class="list-title">常用AI工具</div>
      </div>
      <div class="list-content flex-wrap">
        <div class="list-item flex" v-for="(v, i) in commonTools" :key="i">
          <a class="flex" href="javascript:;" @click="jump(v)">
            <div class="icon-box">
              <img v-if="v.icon" :src="v.icon" alt="v.title">
              <!-- 显示第一个字符的背景 -->
              <div v-else class="icon-box-bg">
                {{v.title.substring(0, 1)}}
              </div>
            </div>
            <div class="info">
              <div :class="['name ellipsis']" :title="v.title">{{ v.title }}</div>
              <div class="desc">{{ v.content }}</div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div v-if="aiTools.length">
      <template v-for="(item, index) in aiTools" :key="index">
        <div class="list-container">
          <div class="top-box flex">
            <div class="list-title">{{ item.title }}</div>
          </div>
          <div class="list-content flex-wrap">
            <div class="list-item flex" v-for="(v, i) in item.list" :key="i">
              <a class="flex" href="javascript:;" @click="jump(v)">
                <div class="icon-box">
                  <img v-if="v.icon" :src="v.icon" alt="v.title">
                  <!-- 显示第一个字符的背景 -->
                  <div v-else class="icon-box-bg">
                    {{v.title.substring(0, 1)}}
                  </div>
                </div>
                <div class="info">
                  <div :class="['name ellipsis']" :title="v.title">{{ v.title }}</div>
                  <div class="desc">{{ v.content }}</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
